<template>
    <view class="room-item" @tap="clickitem">
        <image class="cover" :src="baseUrl + item.cover_img" mode="aspectFill" />
		<view class="mask"></view>
        <view class="time">{{item.start_time_data}}-{{item.end_time_data}}</view>
        <view class="title u-line-1">{{item.name}}</view>
    </view>
</template>

<script>
    export default{
        props: {
            item: {}
        },
        data() {
			return {
				baseUrl: this.config.baseUrl
			}
		},
        methods: {
            clickitem(event) {
				
                const roomid = this.item.roomid;
                const room_cover = this.item.cover_img;
                const play_url = this.item.live_replay;
				
                uni.navigateTo({
                    url: `/pagesA/live/play?roomid=${roomid}&room_cover&${room_cover}&play_url=${play_url}`,
                    events: {
                    },
                    success: function(res) {
                        // 通过eventChannel向被打开页面传送数据
                    }
                })
            }
        },
        computed: {},
        mounted() {
        },
    }
</script>
<style lang="scss">
    .room-item {
        /* width: 45vw;
        height: 45vw; */
		width: 100%;
		height: 300rpx;
        overflow: hidden;
        margin-top: 4px;
        border-radius: 7px;
        position: relative;
		
		.mask{
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, .6);
			background-image: url('../../static/images/live/play.png');
			background-size: 60rpx 60rpx;
			background-repeat: no-repeat;
			background-position: center 75rpx;
		}
		.title {
		    position: absolute;
		    top: 155rpx;
		    left: 0;
		    width: 100%;
		    text-align: center;
		    font-size: 32rpx;
		    color: #FFFFFF;
		}
		.time{
			position: absolute;
			top: 215rpx;
			left: 0;
			width: 100%;
			text-align: center;
			color: #fff;
			font-size: 24rpx;
		}
    }
    .cover {
        height: 100%;
        width: 100%
    }
    
</style>